// Editor
import React from 'react';

import { List, Row, Col, Checkbox } from 'antd';
import Icon from 'zent/lib/icon';
import Radio from 'zent/lib/radio';
import { ColorPicker } from 'zent';
import { DesignEditor, ControlGroup, } from 'zent/lib/design/editor/DesignEditor';
import CouponModal from './CouponModal';
const RadioGroup = Radio.Group;

export const PLACEHOLDER = '请填写内容，如果过长，将会在手机上滚动显示';
import styles from './index.less';



export default class CouponEditor extends DesignEditor {

  handleChangeColor = (color) => {
    let fontcolor = "";
    if (color == "#F5222D") {
      fontcolor = "Red"
    }
    this.props.onChange({ color, fontcolor });
  }
  SetIsHide = (e) => {
    this.props.onChange({ isHide: e.target.checked });
  }
  SetStyle = (e) => {
    this.props.onChange({ style: e.target.value });
  }
  Delete = (Id) => {
    this.props.onChange({ list: this.props.value.list.filter(item => item.Id !== Id) });
  }
  SetCouponList = (data) => {
    const { value: { list, selectId } } = this.props
    let listMap = list
    let selectIdMap = selectId
    data.forEach(item => {
      if (listMap.length < 10) {
        if (!listMap.filter(i => i.Id === item.Id).length > 0) {
          listMap.push(item)
          selectIdMap.push(item.Id);
        }
      }
    });
    this.props.onChange({ list: listMap, selectId: selectIdMap });
  }
  render() {
    const { value, prefix } = this.props
    const presetColors = [
      '#F5222D',
      '#FACAC0',
      '#A6CFE2',
      '#EED974',
      '#C6D7C7',
      '#F6906F',
      '#B389C4',
    ];

    return (
      <div className={styles.Coupon}>
        <div className={`xkd-moduleTitle`} style={{ fontSize: '14px' }}>优惠券</div>

        <Row>
          <Col span={3}>样式：</Col>
          <Col span={21}>
            <ControlGroup>
              <RadioGroup value={value.style} onChange={this.SetStyle}>
                <Radio value={1}>样式一</Radio>
                <Radio value={2}>样式二</Radio>
                <Radio value={3}>样式三</Radio>
                <Radio value={4}>样式四</Radio>
              </RadioGroup>
            </ControlGroup>
          </Col>
        </Row>
        <Row className='ColorPicker'>
          <Col span={3}>颜色：</Col>
          <Col span={21}>
            <ColorPicker
              color={value.color}
              type="simple"
              onChange={this.handleChangeColor}
              presetColors={presetColors}
            />
          </Col>
        </Row>
        <Row>
          <Col span={3}>更多设置：</Col>
          <Col span={21}><Checkbox checked={value.isHide} onChange={this.SetIsHide}>隐藏已抢完的券</Checkbox></Col>
        </Row>
        <List
          bordered
          dataSource={value.list ? value.list : []}
          renderItem={item => (<List.Item>优惠券：{item.Name}({item.FormativeContext})
          <Icon
              type="close-circle"
              onClick={() => this.Delete(item.Id)}
              className={`${prefix}-design-component-image-ad-editor__entry-close-btn`}
            />
          </List.Item>)}
        />
        <Row className='act'>
          <Col span={10}>
            <a onClick={() => {
              const title = `选择优惠券`;

              this.CouponModal.show({ title, width: 960, selectId: value.selectId }, this.SetCouponList)

            }}><Icon type="plus" />添加优惠券</a>
          </Col>
          <Col span={10} offset={4}>最多添加10张优惠券</Col>
        </Row>
        <CouponModal
          ref={e => {
            this.CouponModal = e;
          }}
        />
      </div>
    );
  }

  static designType = 'coupon';
  static designDescription = '优惠券';
  static getInitialValue(settings, globalConfig) {
    return {
      style: 1,
      color: '#F5222D',
      fontcolor: "Red",
      isHide: false,
      list: [],
      selectId: []
    };
  }
}